<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="js/myhead.js"></script>
    <link rel="stylesheet" href="css/userinfo.css">
    <style>
        .myBlog_div > img{
            width: 100%;
            height: 65%;
            object-fit: revert;
        }
        .myBlog_title{
            width: 100%;
            height: 12%;
            box-sizing: border-box;
            padding-left: 20px;
            font-weight: bold;
        }
        .myBlog_time > span{
            padding-left: 15px;
        }
    </style>
</head>
<body>
<div id="app">
    <myhead @uo="getUserinfo">
    </myhead>
    <div class="useinfo_box" v-bind:style="{ backgroundImage: 'url(' + userinfo.photo + ')'}">
        <div class="userinfo_head" >
            <img :src="userinfo.photo">
        </div>
        <div class="userinfo_info">
            <div class="userinfo_name">用户名：{{firedInfo.uname}}
            </div>
            <div class="userinfo_phone">手机号码：{{firedInfo.phone}}</div>
            <div class="userinfo_email">Email：{{firedInfo.email}}</div>
            <div class="userinfo_desc">个人简介：{{firedInfo.descript==null?'还没有简介':userinfo.descript}}</div>
            <div class="userinfo_guan">
<!--                <div class="fans">粉丝：{{fansPage.total}}</div>
                <div class="attention">关注：{{attenPage.total}}</div>
                <div class="admire">获赞：{{guan.admire}}</div>-->
                <div class="admire">余额：{{firedInfo.balance}}</div>
                <!--
                                <div class="editor">  <el-button   style="height: 30px;line-height: 5px">编辑</el-button></div>
                -->
            </div>
        </div>
    </div>
    <div style="width: 70%;height: 630px;border: 1px solid grey;margin: 10px auto">
        <div style=" width: 25%;float:left;
            height: 40%;margin-left: 5%;margin-top: 20px;
            object-fit: revert;border: 1px solid grey" v-for="item in artPage.records">
           <img style="width: 100%;height: 70%" :src="item.pic">
            <div class="myBlog_title">{{item.title.length>10?item.title.substring(0,12)+'...':item.title}}</div>
            <div class="myBlog_time" style="color: gray;font-size: 12px;">
                <span><i class="el-icon-timer"></i>&nbsp;{{item.adate}}</span>
                <span><i class="el-icon-view">&nbsp;</i>{{item.view}}</span>
                <span><i class="el-icon-star-on">&nbsp;</i>{{item.likes}}</span>
            </div>
        </div>
        <div class="fenye">
            <el-pagination style="margin: 10px 580px"
                           layout="prev, pager, next"
                           :page-size="artPage.size"
                           :total="Number(artPage.total)"
                           @current-change="changePage">
            </el-pagination>
        </div>
    </div>
    <div class="footer">
        <div class="er"></div>
        <div class="newBlog">
            <p style="margin-top: 60px;font-size: 18px;font-weight: bold">最近博客</p>
            <p style="margin-top: 10px">用户故事(User Strory)</p>
            <p style="margin-top: 10px"> 关于刻意联系的清单</p>
            <p style="margin-top: 10px">失败要趁早</p>
        </div>
        <div class="lian">
            <p style="margin-top: 60px;font-size: 18px;font-weight: bold">联系我们</p>
            <p style="margin-top: 10px">Email：2435939131@qq.com</p>
            <p style="margin-top: 10px">QQ：2435939131</p>
        </div>
        <div class="lie">
            <p style="margin-top: 60px;font-size: 18px;font-weight: bold">Lirenmi</p>
            <p style="margin-top: 10px">这是我的个人博客、会分享关于编程、写作、思考相关的任何</p>
            <p style="margin-top: 10px">内容，希望可以给来到这儿的人有所帮助...</p>
        </div>
    </div>
</div>
<script>
    let app=new Vue({
        el:"#app",
        data:{
            userinfo:'',
            uid:'',
            firedInfo:'',
            artPage:{page:1,size:6,total:0,records:''},
        },
        created() {
            this.getuid();
            this.getFiredInfo();
            this.getFiredArt();
        },
        methods:{
            getUserinfo(userinfo){
                this.userinfo=userinfo;
                console.log(this.userinfo)
            },
            getuid(){
             this.uid= location.search.replace("?","");
            },
            getFiredInfo(){
                axios.get(`user/userinfo/getUserInfoByUsid?usid=${this.uid}`).then(res=>{
                    this.firedInfo=res.data.data;
                    console.log(res.data);
                })
            },
            getFiredArt(){
                axios.get(`other/article/getFiredArt?page=${this.artPage.page}&size=${this.artPage.size}&usid=${this.uid}`).then(res=>{
                    this.artPage.records=res.data.data.records;
                    this.artPage.total=res.data.data.total;
                   console.log(this.artPage.records)
                })
            },
            //分页查询
            changePage(page){
                this.artPage.page=page;
                this.getFiredArt();
            },
        }
    })
</script>
</body>
</html>